<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="demo"></table>
<script type="text/html" id="toolbarDemo">
    <div style="padding-bottom: 10px;">
        <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" data-type="role">权限</a>
    <a class="layui-btn layui-btn-xs" data-type="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-type="del">删除</a>
</script>
<div id="demo7"></div>
<script src="/layuiadmin/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script language='javascript' th:inline="javascript">
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['table','laypage','jquery','form','layer'], function(){
        let layer=layui.layer;
        let table = layui.table;
        let laypage=layui.laypage;
        let $=layui.jquery;

        let data=[[${sysRoleList}]];
        //展示已知数据
        table.render({
            elem: '#demo'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板

            ,cols: [
                [ //标题栏
                    {field: 'id', title: 'ID', width: 80}
                    ,{field: 'role', title: '账号', width: 120}
                    ,{field: 'description', title: '用户名', minWidth: 80}
                    ,{field: 'available', title: '状态', minWidth: 30}
                    ,{field:'id', title: '操作', width:200,toolbar:"#barDemo"}
                ]
            ]
            ,data: data.records
            ,limit: 5, //每页默认显示的数量
            done: function(res, curr, count){
                //完整功能
                laypage.render({
                    elem: 'demo7'
                    ,count: data.total
                    ,curr: data.current
                    ,limit: data.size
                    ,layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
                    ,jump: function(obj,first){
                        if (!first) {
                            let href = '/sys/role/list?';
                            href += 'pageNo=' + obj.curr;
                            href += '&pageSize=' + obj.limit;
                            window.location.replace(href);
                        }
                    }
                });
            }
        });

        //事件
        let active = {
            add: function(){
                layer.open({
                    type: 2
                    ,title: '添加用户'
                    ,content: '/sys/role/inster'
                    ,maxmin: true
                    ,area: ['700px', '500px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero) {
                        let formSubmit=layer.getChildFrame('form', index);
                        console.log(formSubmit)
                        let submited = formSubmit.find('#LAY-user-back-submit')[0];
                        console.log(submited)
                        submited.click();
                        layer.close(index); //关闭弹层
                        location.reload();
                    }
                });
            },
            edit: function(){
                layer.open({
                    type: 2
                    ,title: '修改用户'
                    ,content: '/sys/role/update'
                    ,maxmin: true
                    ,area: ['700px', '500px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero) {
                        let formSubmit=layer.getChildFrame('form', index);
                        console.log(formSubmit)
                        let submited = formSubmit.find('#LAY-user-back-submit')[0];
                        console.log(submited)
                        submited.click();
                        layer.close(index); //关闭弹层
                        location.reload();
                    }
                });
            },
            del: function(){
                var checkStatus = table.checkStatus('#barDemo')
                    ,checkData = checkStatus.data; //得到选中的数据
                if(checkData.length === 0){
                    return layer.msg('请选择数据');
                }
                $.ajax({
                    url: "/sys/role/delete",
                    method: 'POST',
                    success: function () {
                        if(data!=null&&data.code==200){
                            layer.msg("删除成功")
                        }else{
                            layer.msg("删除失败")
                        }
                    }
                })
            },
            role: function(){
                layer.open({
                    type: 2
                    ,title: '添加用户'
                    ,content: '/sys/role/role'
                    ,maxmin: true
                    ,area: ['700px', '500px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero) {
                        var formSubmit=layer.getChildFrame('form', index);
                        console.log(formSubmit)
                        var submited = formSubmit.find('#LAY-user-back-submit')[0];
                        console.log(submited)
                        submited.click();
                        layer.close(index); //关闭弹层
                        location.reload();
                    }
                });
            }
        }
        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>